<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据概况</title>
    <link rel="stylesheet" href="css/wodry.css">
    <link rel="stylesheet" href="css/survey.css">
    <link rel="stylesheet" href="css/public.css">

    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });

            //自动轮播
            var timer = setInterval(autoPlay, 3000);
            function autoPlay(){
                var $bannerUl=$('#banner ul'),$bannerLi=$('#banner ul li');
                //动态获取ul的宽度
                $bannerUl.css('width',$bannerLi.width()*$bannerLi.length);
                $bannerUl.animate({
                    'marginLeft':-$bannerLi.width()
                },500,function(){
                    $(this).animate({'marginLeft':0},0)
                        .find('li').eq(0).appendTo($(this));
                    //把每次移动后的第一个li放到ul的最后面
                    /*
                    * 由于把第一个li放到ul的最后面，就会把第二个li挤到第一个li的位置，但是我们又需要显示第二个li，
                    * 所以需要移动回原点，但是这个移动过程不能被看到，所以执行时间是0
                    */
                });
            }

            // 清除和设置定时器
            $("#banner").mouseover(function(){
                clearInterval(timer);
            });

            $("#banner").mouseout(function () {
                timer = setInterval(autoPlay, 3000);
            })


        });


        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>

</head>
<body>

<div class="main" id="app">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                供应商供应统计
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>

    </div>

    <div class="center">
        <div class="center-left fl">
            <div class="left-cen rightTop border">
                <div class="title">供应商销售情况</div>
                <!-- 供应商 -->
                <div id="banner" class="banner">
                    <ul>
                        <li v-for="(item,index) in supplier" :key="index">
                            <div class="list clearfix">
                                <div class="listTxt">
                                    <p>商店名称：<span>{{item.storeName}}</span></p>
                                    <p>销售金额：<span>{{item.amount}}</span></p>
                                    <p>所售商品：<span>{{item.product}}</span></p>
                                    <p>店铺地区：<span>{{item.address}}</span></p>
                                    <p>供应数量：<span>{{item.number}}</span></p>
                                    <p>入站时间：<span>{{item.date}}</span></p>
                                </div>
                                <div class="listImg"><img :src="item.src"></div>
                                <div>
                                    <div style="height: 200px;"></div>
                                    <div style="height: 300px;width: 400px;">
                                        <div style="font-size: 17px; padding: 5px; font-weight: 700; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                供应商品
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                累计供应
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                供应金额
                                            </div>
                                        </div>
                                        <div v-for="(i,j) in item.data" :key="j"
                                        style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                               {{i.supplyGoods}}
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                {{i.accumulatedSupply}}
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                {{i.accumulatedAmount}}
                                            </div>
                                        </div>
                                        <!-- <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                花生油
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                10吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                20万
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                精致马铃薯淀粉
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                8吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                10万
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                木薯粉
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                5吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                3万
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- <li>
                            <div class="list clearfix">
                                <div class="listTxt">
                                    <p>商店名称：<span>北货朗</span></p>
                                    <p>销售金额：<span>80万</span></p>
                                    <p>所售商品：<span>黑木耳，秋木耳等</span></p>
                                    <p>店铺地区：<span>黑龙江 </span></p>
                                    <p>供应数量：<span>200吨</span></p>
                                    <p>入站时间：<span>2024-03-14</span></p>
                                </div>
                                <div class="listImg"><img src="./images/touxiang.png"></div>
                                <div>
                                    <div style="height: 200px;"></div>
                                    <div style="height: 300px;width: 400px;">
                                        <div style="font-size: 17px; padding: 5px; font-weight: 700; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                供应商品
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                累计供应
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                供应金额
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                黑木耳
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                122吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                50万
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                秋木耳
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                78吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                30万
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="list clearfix">
                                <div class="listTxt">
                                    <p>商店名称：<span>大庄园</span></p>
                                    <p>销售金额：<span>50万</span></p>
                                    <p>所售商品：<span>农产品</span></p>
                                    <p>店铺地区：<span>黑龙江 </span></p>
                                    <p>供应数量：<span>200吨</span></p>
                                    <p>入站时间：<span>2024-03-14</span></p>
                                </div>
                                <div class="listImg"><img src="./images/touxiang.png"></div>
                                <div>
                                    <div style="height: 200px;"></div>
                                    <div style="height: 300px;width: 400px;">
                                        <div style="font-size: 17px; padding: 5px; font-weight: 700; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                供应商品
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                累计供应
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                供应金额
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                牛肉
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                22吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                20万
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                羊肉
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                20吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                12万
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                猪肉
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                10吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                5万
                                            </div>
                                        </div>
                                        <div style="font-size: 17px; padding: 5px; display: flex; border-bottom: 1px solid white;"> 
                                            <div style="width: 33.3%; text-align: center;">
                                                羊腰
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                                10吨
                                            </div>
                                            <div style="width: 33.3%; text-align: center;">
                                               10万
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
            <!-- 商品占比 -->
            <!-- <div class="left-bottom rightTop border">
                <div class="title">商品分类占比</div>
                <div class="bottom-b">
                    <div id="chart3" class="allnav"></div>
                </div>
            </div> -->
        </div>
        <!-- 地图 -->
        <div class="center-cen fl">
            <div class="cen-top">
                <div class="top-bottom">
                    <div id="diqu" class="allnav" ></div>
                </div>
            </div>
        </div>
        <div class="center-right fr">
            <!--  -->
            <div class="right-top rightTop border">
                <div class="title">各供应商供应排行</div>

                <div class="echart wenzi">
                    <div class="gun">
                    <span>排名</span>
                    <span>供应商名称</span>
                    <span>供应</span>
                </div>
                    <div id="FontScroll" class="myscroll">
                        <ul>
                            <li v-for="(item,index) in supplierRank">
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>{{index+1}}</b>
                                    </span>
                                    <span>{{item.supplierName}}</span>
                                    <span>{{item.number}}</span>
                                </div>
                            </li>
                            <!-- <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>2</b>
                                    </span>
                                    <span>北货郎森林食品有限公司</span>
                                    <span>4125</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>3</b>
                                    </span>
                                    <span>大庄园肉业集团股份有限公司</span>
                                    <span>4100</span>
                                </div>
                            </li> -->
                        </ul>
                    </div>
                </div>

            </div>
            <div class="right-cen border">
                <div class="title">供应商品占比</div>
                <div class="right-cen-cent">
                    <div id="chart2" class="allnav"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="popup">
    <a href="javascript:;" class="popupClose"></a>
    <div class="summary">
        <div class="summaryTop">
            <div id="summaryPie1" class="summaryPie"></div>
            <div id="summaryPie2" class="summaryPie"></div>
            <div id="summaryPie3" class="summaryPie"></div>
        </div>
        <div class="summaryBottom">
            <div class="summaryBar">
                <div class="summaryTit">

                </div>
                <div id="summaryBar"></div>
            </div>

            <div class="summaryLine">
                <div class="summaryTit">

                </div>
                <div id="summaryLine"></div>
            </div>
        </div>
    </div>
</div>



<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../../../js/vue.min.js"></script>
<script src="js/wodry.min.js"></script>
<script src="js/fontscroll.js"></script>
<script src="js/survey.js"></script>
<script>
    $('#chart3').on('click',function(){
        $('.filterbg').show();
        $('.popup').show();
        $('.popup').width('3px');
        $('.popup').animate({height: '76%'},400,function(){
            $('.popup').animate({width: '82%'},400);
        });
        setTimeout(summaryShow,800);
    });
    $('.popupClose').on('click',function(){
        $('.popupClose').css('display','none');
        $('.summary').hide();
        $('.popup').animate({width: '3px'},400,function(){
            $('.popup').animate({height: 0},400);
        });
        setTimeout(summaryHide,800);
    });
    function summaryShow(){
        $('.popupClose').css('display','block');
        $('.summary').show();
        setSummary();

    };
    function summaryHide(){
        $('.filterbg').hide();
        $('.popup').hide();
        $('.popup').width(0);
    };
</script>




</body>
</html>